<template>
  <section>
    <el-tabs value="third" style="min-height: 600px" v-loading="loading">
      <el-tab-pane label="用户信息" name="base">
        <el-form label-width="100px" v-model="dataForm">
          <el-form-item v-for="label in dataLabelBase" :key="label.code" :label="label.txt">
            <el-row v-if="label.code === 'currDate'">
              {{dataForm[label.code]}}
            </el-row>
            <el-row v-else-if="label.code === 'type'">
              <el-select v-model="dataForm[label.code]" size="mini">
                <el-option :value="type.val" v-for="type in typeList" :key="type.val" :label="type.label">{{type.label}}</el-option>
              </el-select>
            </el-row>
            <el-input v-else v-model="dataForm[label.code]" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="报告数据" name="third">
        <el-collapse>
          <el-collapse-item  v-for="label in dataLabel" :key="label.code" :label="label.txt" :title="label.txt" :name="label.code">
            <el-row v-if="label.code ==='sixQi'">
              <el-form label-width="80px" size="mini">
                <el-form-item v-for="qi in dataForm[label.code]" :key="qi.id" :label="qi.name">
                  <el-input size="mini" v-model="qi.point"></el-input>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row  v-else-if="label.code ==='physicalSubtype'">
              <el-select multiple v-model="dataForm[label.code]" value-key="id" size="mini">
                <el-option v-for="(option) in physicalSubtypeList" :key="option.id" :label="option.name" :value="option">
                  <span style="float: left">{{ option.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px;margin-right: 20px">{{option.style.txt}}</span>
                </el-option>
              </el-select>
            </el-row>
            <div v-else-if="label.code ==='physicalGrade'">
              <el-select v-model="dataForm[label.code]" value-key="id" size="mini">
                <el-option v-for="(option,index) in physicalGradeList" :key="index" :label="option.name" :value="option">
                  <span style="float: left">{{ option.name }}-{{option.type}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px;margin-right: 20px">{{ option.style.txt}}</span>
                </el-option>
              </el-select>
              <span style="color: red">*1-儿童；2-成人</span>
            </div>
            <div v-else-if="label.code ==='physical'">
              <el-select v-model="dataForm[label.code]" value-key="id" size="mini">
                <el-option v-for="(option,index) in physicalList" :key="index" :label="option.name" :value="option">
                  <span style="float: left">{{ option.name }}-{{option.type}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px;margin-right: 20px">{{ option.style.txt}}</span>
                </el-option>
              </el-select>
              <span style="color: red">*1-儿童；2-成人</span>
            </div>
            <div v-else-if="label.code ==='sport'" style="display: flex;flex-direction: row">
              <div style="min-width:50%">已选：
                <el-tag size="small" style="margin-right: 20px" v-for="(method,i) in dataForm[label.code]" :key="method.id" closable @close="dataForm[label.code].splice(i,1)">
                  {{method.name}}
                </el-tag>
              </div>
              <div>
                <el-tabs tab-position="left" style="height: 200px;min-width:40%">
                  <el-tab-pane v-for="sport in sportList":label="sport.name" :key="sport.id">
                    <el-checkbox-group v-model="dataForm[label.code]" size="mini">
                      <el-checkbox style="margin:0 30px 0 0;"
                                   v-for="(method,index) in sport.sportMethods.filter(o=>{ return dataForm[label.code].findIndex(f=>f.id === o.id) <0})"
                                   :label="method" :key="index">
                        {{method.name}}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div v-else-if="label.code ==='guasha' || label.code ==='aijiu'">
              <el-button @click="addAcupointBtn(dataForm[label.code])" size="mini">添加新内容</el-button>
              <el-row>
                <el-col :span="5">穴位：</el-col>
                <el-col :span="10">手法：</el-col>
                <el-col :span="9">功效：</el-col>
              </el-row>
              <el-row v-for="(method,i) in dataForm[label.code]" :key="i">
                <el-col :span="5">
                  <el-select v-model="dataForm[label.code][i].key" value-key="id" size="mini" multiple>
                    <el-option v-for="(option,index) in acupointList" :key="option.id" :label="option.name" :value="option">
                      <span style="float: left">{{ option.name }}</span>
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input size="mini" v-model="dataForm[label.code][i].val"></el-input>
                </el-col>
                <el-col :span="9">
                  <el-input size="mini" v-model="dataForm[label.code][i].effect"></el-input>
                </el-col>
              </el-row>
            </div>
            <div v-else-if="label.code ==='disease'" style="display: flex;flex-direction: row">
              <div style="min-width:50%;max-width: 50%">已选：
                <el-tag size="small" style="margin-right: 20px" v-for="(method,i) in dataForm[label.code]" :key="method.id" closable @close="dataForm[label.code].splice(i,1)">
                  {{method.name}}
                </el-tag>
              </div>
              <div style="min-width:40%">
                <el-tabs tab-position="left" style="height: 200px">
                  <el-tab-pane v-for="disease in diseaseList" :label="disease.name" :key="disease.id">
                    <el-checkbox-group v-model="dataForm[label.code]" size="mini">
                      <el-checkbox style="margin:0 30px 0 0;"
                                   v-for="(method,index) in disease.diseaseDetails.filter(o=>{ return dataForm[label.code].findIndex(f=>f.id === o.id) <0})"
                                   :label="method" :key="index">
                        {{method.name}}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div v-else-if="label.code ==='foodSuggest'" style="display: flex;flex-direction: row">
              <div style="min-width:50%;border: 0px solid crimson">
                <el-tag size="mini" style="margin-right: 20px" v-for="(option,i) in dataForm[label.code]" :key="option.id" closable @close="dataForm[label.code].splice(i,1)">
                  {{option.name}}
                </el-tag>
              </div>
              <div style="min-width:50%">
                <el-checkbox-group v-model="dataForm[label.code]" size="mini"  v-if="dataForm[label.code]">
                  <el-checkbox style="margin:0 30px 0 0;"
                               v-for="(option,index) in dataLabelOptions.filter(o=>{ return dataForm[label.code].findIndex(f=>f.id === o.id) <0})"
                               :label="option" :key="index" v-if="option.style.code === 'food'" @change="makeIdToData($event,dataForm[label.code],option)">
                    {{option.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div v-else-if="label.code ==='foodSuggestWithout'">
              <el-input v-model="dataForm[label.code]" size="mini" style="width: 50%;"></el-input>
            </div>
            <div v-else style="display: flex;flex-direction: row">
              <div style="min-width:50%;border: 0px solid crimson">
                <el-tag size="small" style="margin-right: 20px" v-for="(option,i) in dataForm[label.code]" :key="option.id" closable @close="dataForm[label.code].splice(i,1)">
                  {{option.name}}
                </el-tag>
              </div>
              <div style="min-width:40%">
                <el-checkbox-group v-model="dataForm[label.code]" size="mini"  v-if="dataForm[label.code]">
                  <el-checkbox style="margin:0 30px 0 0;"
                               v-for="(option,index) in dataLabelOptions.filter(o=>{ return dataForm[label.code].findIndex(f=>f.id === o.id) <0})"
                               :label="option" :key="index" v-if="label.code === option.style.code" @change="makeIdToData($event,dataForm[label.code],option)">
                    {{option.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="saveBtn" size="mini" v-if="currReportData" type="primary">保存</el-button>
    <el-button @click="finishBtn" size="mini" v-if="currReportData" type="success">完成</el-button>
  </section>
</template>

<script>
  import DateFormat from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import TextEditor from '@/components/TextEditor'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "reportData",
    components:{TextEditor},
    data() {
      return {
        customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
        pickData:null,
        pickDialog:false,
        currOption:null,
        loading:false,
        currExamine:null,
        currReportData:null,
        typeList:[
          {label:'儿童',val:1},
          {label:'成人',val:2},
        ],
        dataForm:{
          sport:[],
          foodEffect:[],
          foodCategory:[],
          recipe:[],
          physicalSubtype:[],
          disease:[],
          sixQi:[
            {id:1,name:'相火',point:0},
            {id:2,name:'燥金',point:0},
            {id:3,name:'寒水',point:0},
            {id:4,name:'湿土',point:0},
            {id:5,name:'风木',point:0}]
        },
        dataLabelBase:[
          {txt:'报告类型',code:'type'},
          {txt:'姓名',code:'name'},
          {txt:'性别',code:'gender'},
          {txt:'年龄',code:'age'},
          {txt:'出生日期',code:'birthday'},
          {txt:'手机',code:'phone'},
          {txt:'联系地址',code:'address'},
          {txt:'本次体检时间',code:'currDate'},
          {txt:'下次体检时间',code:'nextDate'}
        ],
        dataLabel:[
          {txt:'六气得分',code:'sixQi'},
          {txt:'体质亚型',code:'physicalSubtype'},
          {txt:'体质等级',code:'physicalGrade'},
          {txt:'体质类型',code:'physical'},
          {txt:'推荐主食',code:'foodSuggest'},
          {txt:'推荐食物',code:'foodEffect'},
          {txt:'不宜食用',code:'foodSuggestWithout'},
          {txt:'不同食物类型选择频率',code:'foodCategory'},
          {txt:'食谱',code:'recipe'},
          {txt:'推拿',code:'massage'},
          {txt:'刮痧',code:'guasha'},
          {txt:'艾灸',code:'aijiu'},
          {txt:'小药箱',code:'disease'},
          {txt:'日常锻炼',code:'sport'},
        ],
        sixQiBase:[
          {id:1,name:'相火',point:0},
          {id:2,name:'燥金',point:0},
          {id:3,name:'寒水',point:0},
          {id:4,name:'湿土',point:0},
          {id:5,name:'风木',point:0},
        ],
        dataLabelOptions:[],
        physicalGradeList:[],
        physicalSubtypeList:[],
        physicalList:[],
        sportList:[],
        sportMethodList:[],
        acupointList:[],
        diseaseList:[]
      }
    },
    created(){
      this.loading=true
      console.log(this.$route.params.reportDataId)
      //获取这个报告数据
      this.getReportData(this.$route.params.reportDataId)
      // this.getExamine(this.$route.params.reportDataId)
      //获取知识库数据
      this.getDataBase()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDate(a){
        console.log('时间格式——————————————————————————',a)
        return DateFormat.format(a)
      },
      addAcupointBtn(e){
        console.log(e)
        e.push({key:[],val:'',effect:''})
      },
      delTagBtn(e){
        console.log(e)
      },
      makeIdToData(e,form,data){
        console.log(e,form,data)

      },
      finishBtn(){
        this.loading = true
        this.$confirm('完成后不能修改，确认完成报告数据？')
          .then(()=> {
            this.fetch({name:"finishReportData",data:{id:this.currReportData.id}})
              .then(res=>{
                // console.log(res)
                this.loading = false
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })

        // console.log(this.currReportData)
      },
      saveBtn(){
        console.log(this.dataForm)
        console.log(this.currReportData)
        this.updateReportData(this.currReportData.id,JSON.stringify(this.dataForm))
      },
      updateReportData(id,data){
        this.fetch({name:"updateReportData",data:{id,data},method:'post'})
          .then(res=>{
            console.log(res)
            this.currReportData=res
            this.dataForm=res.data
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getReportData(id){
        this.fetch({name:"getReportData",data:{id}})
          .then(res=>{
            console.log('当前报告数据——————————————',res)
            this.currReportData=res
            this.initReportData(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      initReportData(res){
        this.dataForm={...res.data}
        // this.dataForm.foodSuggestWithout=''
        if(this.dataForm.name === undefined){
          this.getCustomer(res.customerId)
        }
        console.log(this.dataForm)
        this.loading=false
      },
      getCustomer(uid){
        this.fetch({name:"getCustomer",data:{uid}})
          .then(res=>{
            console.log(res)
            this.dataForm.name=res.name
            this.dataForm.gender=res.gender===1?'男':'女'
            this.dataForm.age=''
            this.dataForm.birthday=res.birthday
            this.dataForm.phone=res.phone
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDataBase(){
        this.getDiseaseList()
        this.getSportList()
        this.getMassageList()
        this.getRecipeList()
        this.getFoodEffectList()
        this.getFoodCategoryList()
        this.getPhysicalList()
        this.getGradeList()
        this.getPhysicalSubtypeList()
        this.getAcupointList()
        this.getFoodList()
      },
      getFoodList(pageNo){
        this.fetch({name:"getFoodList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            res.content.forEach(r=>{
              let tmp ={...r,style:{txt:'食物功效',code:'food'}}
              this.dataLabelOptions.push(tmp)
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDiseaseList(pageNo){
        this.fetch({name:"getDiseaseList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log('————————————————',res)
            res.content.forEach(r=>{
              r.section=JSON.parse(r.method)
              r.section.forEach((s,i)=>{
                s.unshift({key:'id',val:i})
              })
              let tmp ={...r,style:{txt:'疾病',code:'disease'}}
              this.diseaseList.push(tmp)
            })
            console.log(this.diseaseList)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getAcupointList(pageNo){
        this.fetch({name:"getAcupointList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            // console.log(res)
            this.acupointList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getPhysicalSubtypeList(){
        this.fetch({name:"getPhysicalSubtypeList"})
          .then(res=>{
            res.forEach(r=>{
              if(r.childrens){
                r.childrens.forEach(c=>{
                  c={...c,style:{txt:'体质亚型',code:'physicalSubtype'}}
                  this.physicalSubtypeList.push(c)
                })
                return
              }
              r={...r,style:{txt:'体质亚型',code:'physicalSubtype'}}
              this.physicalSubtypeList.push(r)
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getPhysicalList(){
        this.fetch({name:"getPhysicalList"})
          .then(res=>{
            // console.log(res)
            res.forEach(r=>{
              r.style={txt:'体质类型',code:'physical'}
            })
            this.physicalList=res
            // console.log('————————————————————',this.physicalList)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGradeList(){
        this.fetch({name:"getGradeList"})
          .then(res=>{
            // console.log(res)
            res.forEach(r=>{
              r.style={txt:'体质等级',code:'physicalGrade'}
            })
            this.physicalGradeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getSportList(pageNo){
        this.fetch({name:"getSportList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            this.sportList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getMassageList(pageNo){
        this.fetch({name:"getMassageList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log(res)
            res.content.forEach(r=>{
              let tmp ={...r,style:{txt:'推拿',code:'massage'}}
              this.dataLabelOptions.push(tmp)
            })
            console.log(this.dataLabelOptions)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getRecipeList(pageNo){
        this.fetch({name:"getRecipeList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            res.content.forEach(r=>{
              let tmp ={...r,style:{txt:'食谱',code:'recipe'}}
              this.dataLabelOptions.push(tmp)
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getFoodEffectList(pageNo){
        this.fetch({name:"getFoodEffectList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            res.content.forEach(r=>{
              let tmp ={...r,style:{txt:'食物功效',code:'foodEffect'}}
              this.dataLabelOptions.push(tmp)
            })
            // console.log(this.dataLabelOptions)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getFoodCategoryList(pageNo){
        this.fetch({name:"getFoodCategoryList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            res.content.forEach(r=>{
              let tmp ={...r,style:{txt:'食物分类',code:'foodCategory'}}
              this.dataLabelOptions.push(tmp)
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
